<script setup lang="ts">
import { VisibleColumnsSlicerComponent } from "@/models/component";
import { computed, ref, watch, inject, ComputedRef, Ref } from "vue";
import * as injectKeys from "@/services/injectKeys";

type TTableInfos = {
  visibleColumns: Ref<string[]>;
  columns: ComputedRef<
    {
      name: string;
      label: string;
      field: string;
    }[]
  >;
};

const props = defineProps<{ model: VisibleColumnsSlicerComponent }>();
const model = props.model;

const componentInfosService = inject(injectKeys.componentInfosServiceKey)!;

const { visibleColumns, columns } = componentInfosService.getInfo<TTableInfos>(
  model.tableId
);

const options = computed(() => columns.value.map((c) => c.name));
</script>

<template>
  <q-select
    v-model="visibleColumns"
    :options="options"
    class="cp-select"
    dense
    display-value="展现列"
    options-dense
    outlined
    multiple
    options-cover
    v-bind="model.props"
  >
    <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
      <q-item v-bind="itemProps">
        <q-item-section>
          <q-item-label v-html="opt" />
        </q-item-section>
        <q-item-section side>
          <q-toggle
            :model-value="selected"
            @update:model-value="toggleOption(opt)"
          />
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

<style scoped lang="less"></style>
